<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'mapackage.add'">创建</el-button>
    <div class="filter-container">
      <el-select style="width: 220px" v-model="query.vendor_id" filterable remote :remote-method="getsupplier"
        class="filter-item" placeholder="请选择供应商" clearable>
        <el-option v-for="i in vendorOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 300px" placeholder="输入物料查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.key_part_no"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'

export default {
  mixins: [commonMixin],
  name: 'mapackage',
  data: function () {
    return {
      api: this.$api.material,
      apiList: this.$api.material + 'getVmList',
      apiCreate: this.$api.material + 'insertOrUpdateVm',
      apiEdit: this.$api.material + 'insertOrUpdateVm',
      apiDelete: this.$api.material + 'deleteVm',
      apiSingle: this.$api.material + 'getbyVmid',
      name: '供应商来料规则',
      columns: [
        { title: '料号', key: 'key_part_no', width: 160 },
        { title: '物料名称', key: 'key_part_name' },
        { title: '供应商代码', key: 'vendor_code', width: 120 },
        { title: '供应商名称', key: 'vendor_name', width: 120 },
        { title: '是否免来料检', key: 'is_exemption' },
        { title: '最小包装量', key: 'min_package_size', width: 100 },
        { title: '最大包装量', key: 'max_package_size', width: 100 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '物料',
          key: 'material_id',
          name: 'select',
          options: [],
          props: { clearable: false, filterable: true, remote: true, remoteMethod: null, placeholder: '输入物料搜索' },
        },
        {
          title: '供应商',
          key: 'vendor_id',
          name: 'select',
          options: [],
          tips: '如果不选，则适用于所有供应商',
          props: { clearable: true, filterable: true, remote: true, 'remote-method': this.getsupplier },
        },
        { title: '是否免检', key: 'is_exemption', name: 'switch', props: { activeValue: 'Y', inactiveValue: 'N' } },
        { title: '最小包装量', key: 'min_package_size', name: 'number', props: { min: 1 } },
        { title: '最大包装量', key: 'max_package_size', name: 'number', props: { min: 1 } },
      ],
      query: {
        queryString: null,
        page: 1,
        size: 10,
      },
      tableProps: {
        border: true,
        opsColWith: 80,
        hideOperations: false,
      },
      formProps: {
        dialogWidth: '70%',
        labelWidth: '120px',
      },
      vendorOptions: [],
    }
  },
  methods: {
    // 供应商远程搜索
    async getsupplier(val) {
      this.$request(this.$api.vendor + 'getlist', {
        page: 1,
        size: 100,
        queryString: val ? val : '',
      }).then((r) => {
        this.vendorOptions = this.tab2VendorOptions = r.list.map((i) => ({
          label: `${i.vendor_code} ${i.vendor_name}`,
          value: i.id,
        }))
      })
      this.getFieldConfig('vendor_id').options = this.vendorOptions
    },
    formatAfterGet(data) {
      //依据实际需求处理
      this.singleMatOptions(data.material_id)
      return data
    },
    getMatOptions(query) {
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', { queryString: query })
          .then((r) => {
            this.setFieldOptions('material_id', r, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      } else {
        this.setFieldOptions('material_id', [])
      }
    },
    singleMatOptions(id) {
      if (id) {
        this.$request(this.$api.mat + 'getmatandsku', { id: id })
          .then((r) => {
            this.setFieldOptions('material_id', r, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      } else {
        this.setFieldOptions('material_id', [])
      }
    },
  },
  created: function () {
    this.getList()
    this.getFieldConfig('material_id').props.remoteMethod = this.getMatOptions
    this.$request(this.$api.vendor + 'getlist', { page: 1 }).then((r) => {
      this.vendorOptions = this.arrayOptions(r.list, 'id', ['vendor_code', 'vendor_name'])
      this.getFieldConfig('vendor_id').options = this.vendorOptions
    })
  },
}
</script>
<style scoped>
</style>
